<template>
  <view>
    <u-navbar :background="{ background: '#fff' }" back-icon-color="#222222" title-color="#222222" title="选择科室/症状" :immersive="true" :border-bottom="false"></u-navbar>
    <view class="" style="width: 100%; height: 280rpx; background: url(https://wenzhen.fuerle168.com/static/index/bg.png) no-repeat; background-size: 100% 100%">
      <view class="" style="padding: 76rpx 0 24rpx 28rpx"></view>
    </view>
    <view class="" style="margin: -100rpx 28rpx; background: #fff; box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1); border-radius: 20rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 31rpx 29rpx">
        <view class="">
          <view class="" style="font-size: 30rpx">
            {{ hospital.hospital_name }}
          </view>
          <!-- 三甲 -->
          <view class="" style="display: flex; align-items: center; margin-top: 20rpx">
            <view
              class=""
              style="
                font-size: 22rpx;
                color: #ff7252;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90rpx;
                height: 36rpx;
                background: #ffe2db;
                border-radius: 18rpx;
              "
            >
              <image src="https://wenzhen.fuerle168.com/static/index/homes.png" mode="" style="width: 24rpx; height: 24rpx"></image>
              <view class="" style="padding-left: 2rpx">
                {{ hospital.level_name }}
              </view>
            </view>
            <view
              class=""
              style="
                font-size: 22rpx;
                color: #1a9eff;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90rpx;
                height: 36rpx;
                background: #e4f4ff;
                border-radius: 18rpx;
                margin-left: 20rpx;
              "
            >
              <image src="https://wenzhen.fuerle168.com/static/index/home.png" mode="" style="width: 24rpx; height: 24rpx"></image>
              <view class="" style="padding-left: 2rpx">
                {{ hospital.classify_text }}
              </view>
            </view>
          </view>
        </view>
        <image :src="img_url + hospital.hospital_image" mode="aspectFill" style="width: 132rpx; height: 132rpx; border-radius: 20rpx"></image>
      </view>
      <!-- 医院简介 -->
      <view class="" style="font-size: 28rpx; font-weight: bold; padding-left: 31rpx">医院简介</view>
      <view
        class=""
        style="font-size: 26rpx; padding: 24rpx 19rpx 0 29rpx; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis"
        @tap="show = true"
      >
        {{ hospital.introduce }}
      </view>
      <!-- 路线 -->
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 70rpx 29rpx 32rpx 29rpx">
        <view class="" style="display: flex; align-items: center">
          <view class="" style="width: 32rpx">
            <image src="https://wenzhen.fuerle168.com/static/index/map.png" mode="" style="width: 32rpx; height: 32rpx"></image>
          </view>

          <view class="" style="font-size: 26rpx; color: #666666; width: 450rpx; padding-left: 10rpx">
            {{ hospital.hospital_address }}
          </view>
        </view>
        <view class="" style="font-size: 24rpx; color: #1a9eff; width: 100rpx" @tap="look">查看路线</view>
      </view>
    </view>
    <view class="" style="height: 120rpx"></view>
    <!-- 科室 -->
    <view class="">
      <view class="u-menu-wrap">
        <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
          <view
            v-for="(item, index) in tabbar"
            :key="index"
            class="u-tab-item"
            :class="[current == index ? 'u-tab-item-active' : '']"
            :data-current="index"
            @tap.stop="swichMenu(index)"
          >
            <text class="u-line-1">{{ item.department_name }}</text>
          </view>
        </scroll-view>
        <block v-for="(item, index) in tabbar" :key="index">
          <scroll-view scroll-y class="right-box" v-if="current == index">
            <view class="page-view">
              <view class="class-item">
                <view class="item-container">
                  <view class="thumb-box" v-for="(item1, index1) in item.disease" :key="index1" @tap="select(item1)">
                    <view class="item-menu-name">{{ item1.disease_name }}</view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </block>
      </view>
    </view>
    <!-- 弹出层 -->
    <u-popup v-model="show" mode="center" border-radius="14" :closeable="true" width="694">
      <view class="" style="font-size: 30rpx; font-weight: bold; text-align: center; padding-top: 44rpx">
        {{ hospital.hospital_name }}
      </view>
      <view style="font-size: 26rpx; padding: 28rpx">{{ hospital.introduce }}</view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabbar: [
        {
          name: '综合科',
          citys: [
            {
              city: '痘痘痤疮'
            },
            {
              city: '面部色斑'
            },
            {
              city: '皮炎'
            }
          ]
        },
        {
          name: '皮肤科',
          citys: [
            {
              city: '痘痘痤疮'
            },
            {
              city: '面部色斑'
            },
            {
              city: '皮炎'
            }
          ]
        }
      ],
      scrollTop: 0, //tab标题的滚动条位置
      current: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      show: false,
      id: null,
      hospital: {}
    };
  },
  //方法
  methods: {
    look() {
      uni.openLocation({
        latitude: Number(this.hospital.hospital_lat),
        longitude: Number(this.hospital.hospital_long),
        name: this.hospital.hospital_name
      });
    },
    getImg() {
      return Math.floor(Math.random() * 35);
    },
    // 点击左边的栏目切换
    async swichMenu(index) {
      if (index == this.current) return;
      this.current = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('menu-scroll-view', 'menuHeight');
        await this.getElRect('u-tab-item', 'menuItemHeight');
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('.' + elClass)
          .fields(
            {
              size: true
            },
            (res) => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass);
                }, 10);
                return;
              }
              this[dataVal] = res.height;
            }
          )
          .exec();
      });
    },
    select(e) {
      console.log(e);
      uni.navigateTo({
        url: '/yuhosp/yuhosp/yuhosp?id=' + this.tabbar[this.current].department_id + '&hospital_id=' + this.id + '&disease_id=' + e.disease_id
      });
    },
    drag() {
      this.api({
        url: '/api/common/hospital',
        method: 'post',
        data: {
          id: this.id
        }
      }).then((res) => {
        this.hospital = res.data;
        this.tabbar = res.data.dement;
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    this.drag();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.u-search-box {
  padding: 18rpx 30rpx;
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.u-search-inner {
  background-color: rgb(234, 234, 234);
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
}

.u-search-text {
  font-size: 26rpx;
  color: $u-tips-color;
  margin-left: 10rpx;
}

.u-tab-view {
  width: 280rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #666666;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #1a9eff;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-tab-item-active::before {
  content: '';
  position: absolute;
  border-left: 3px solid #1a9eff;
  height: 32rpx;
  border-radius: 4rpx;
  left: 0;
  top: 39rpx;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

.page-view {
  padding: 16rpx;
}

.class-item {
  margin-bottom: 30rpx;
  background-color: #fff;
  padding: 16rpx;
  border-radius: 8rpx;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-menu-name {
  font-weight: normal;
  font-size: 30rpx;
  color: #222222;
}

// .item-container {
// 	display: flex;
// 	flex-wrap: wrap;
// }

.thumb-box {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding-left: 51rpx;

  // width: 33.333333%;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // flex-direction: column;
  // margin-top: 20rpx;
}

.item-menu-image {
  width: 120rpx;
  height: 120rpx;
}
</style>
